<template>
  <div>
    <div id="j-categoty-banner-container" class="m-categoty-banner-container">
      <div class="categoty-menu-container">
        <div class="categoty-menu-container">
          <div class="categoty-menu-item-list" style="border-radius: 6px;">

            <div class="categoty-menu-item-container" v-for="item in categoryList" :key="item.id"
                 @mouseover="mouseOver(item.id)" @mouseleave="mouseLeave(item.id)">
              <div class="categoty-menu-item">
                <span class="categoty-menu-item-name">{{item.name}}</span>
                <span class="categoty-menu-item-sub" v-for="categoryItem in item.children" :key="categoryItem.id">
                  <span class="separator">/</span>
                  <span class="categoty-menu-item-sub-name">{{categoryItem.name}}</span>
                </span>
              </div>

              <div v-for="item in categoryList" :key="item.id" :id="item.id" @mouseover="mouseOver(item.id)"
                   @mouseleave="mouseLeave(item.id)" class="categoty-menu-item-detail animated animate__fadeIn"
                   style="min-height: 320px;">
                <div class="categoty-item-detail-container">
                  <div class="categoty-item-detail-title">
                    {{item.name}}
                    <span class="categoty-item-detail-title_arrow"></span>
                  </div>
                  <div class="categoty-item-detail-sub-item-list">
                    <div class="categoty-item-detail-sub-item" v-for="categoryItem in item.children"
                         :key="categoryItem.id">
                      <div class="categoty-item-detail-sub-item-title">
                        {{categoryItem.name}}
                      </div>
                    </div>
                  </div>

                  <div class="categoty-item-detail-quality-list">
                    <div class="categoty-item-detail-quality-list-title">精选好课</div>
                    <a v-for="qualityCourse in item.qualityCourses" :key="qualityCourse.id" :href="qualityCourse.href"
                       class="categoty-item-detail-quality-list-course">
                      <img :src="qualityCourse.picUrl" class="img">
                      <div class="title">{{qualityCourse.name}}</div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="banner-container" @mouseover="showArrow" @mouseleave="hiddenArrow">
        <template>
          <el-carousel id="yxinmiracle-carousel" :interval="3000" :arrow="arrow">
            <el-carousel-item v-for="item in carouselList" :key="item.id">
              <img :src="item.picUrl"
                   style="width: 100%;height: 100%"
                   :alt="item.title">
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
    </div>
    <div class="module-course">
      <div class="course-module">
        <div class="module-title">
          图云课程
        </div>
        <div class="course-module_content">
          <div class="course-list">
            <!-- 课程列表 -->
            <div class="course-card course-list_card" @click="seeDetail(1)">
              <div class="course-card_img">
                <div class="ykt-image course-card_img_jpk">
                  <img src="https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLC7UdxWmVj5o3AHhJ8vpb73HvZo4WdaqOkgjzicWJrn5yZ64jLBIb112OF5XcBnXibUI/600" alt=""
                       class="doload-img">
                </div>
              </div>
              <div class="course-card_content">
                <div class="course-card_content_header">
                  <span class="tag self-tag">自研</span>
                  <span class="tag">IT技能</span>
                  <span>JAVA互联网架构师专题/分布式/高并发/微服务</span></div>
                <div class="course-card_info">
                  <div class="course-time">
                    <span class="course-time_time">时间：2022-01-17 20:00:00</span>
                    <span class="course-time_class">3课时</span>
                  </div>
                </div>
                <div class="course-card_teacher">
                  导师：
                  <span class="teacher">
                    杨涛
                  </span>
                </div>
                <div class="buy-info">
                  <div class="buy-info_left">
                    <span class="buy-count">
                      已有421人购买
                    </span>
                  </div>
                  <div class="buy-info_right">
                    <span class="price">
                      ￥53662.22

                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="course-card course-list_card">
              <div class="course-card_img">
                <div class="ykt-image course-card_img_jpk">
                  <img src="https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLAlf6ghp0uodACI3QJQqtH1dsjlnqtQQSooMicvricp5icbMEiamW6CH455It5HuCF6mRI/356" alt=""
                       class="doload-img">
                </div>
              </div>
              <div class="course-card_content">
                <div class="course-card_content_header">
                  <span class="tag self-tag">自研</span>
                  <span class="tag">编程入门</span>
                  <span>C/C++入门到精通实战/Python/Golang</span></div>
                <div class="course-card_info">
                  <div class="course-time">
                    <span class="course-time_time">时间：2022-02-17 20:00:00</span>
                    <span class="course-time_class">3课时</span>
                  </div>
                </div>
                <div class="course-card_teacher">
                  导师：
                  <span class="teacher">
                    张峻豪
                  </span>
                </div>
                <div class="buy-info">
                  <div class="buy-info_left">
                    <span class="buy-count">
                      已有221人购买
                    </span>
                  </div>
                  <div class="buy-info_right">
                    <span class="price">
                      免费
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="course-card course-list_card">
              <div class="course-card_img">
                <div class="ykt-image course-card_img_jpk">
                  <img src="https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLBGC6XrUOxhc6ib26VbT6gKzQOkqWMDFR00EY9keoXEUkQN4hkFrEFiajMVYWWzb7rYk/356" alt=""
                       class="doload-img">
                </div>
              </div>
              <div class="course-card_content">
                <div class="course-card_content_header">
                  <span class="tag self-tag">自研</span>
                  <span class="tag">编程进阶</span>
                  <span>.NET/C#架构师/高级开发/Core/微服务/分布式/高并发</span></div>
                <div class="course-card_info">
                  <div class="course-time">
                    <span class="course-time_time">时间：2022-03-17 20:00:00</span>
                    <span class="course-time_class">3课时</span>
                  </div>
                </div>
                <div class="course-card_teacher">
                  导师：
                  <span class="teacher">
                    蔡泳信
                  </span>
                </div>
                <div class="buy-info">
                  <div class="buy-info_left">
                    <span class="buy-count">
                      已有4210人购买
                    </span>
                  </div>
                  <div class="buy-info_right">
                    <span class="price">
                      ￥399
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="course-card course-list_card">
              <div class="course-card_img">
                <div class="ykt-image course-card_img_jpk">
                  <img src="https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLBC5eX7icexG6jz6ZrtzLyjJxZM6priaVaQfUv0YrbvXCSsPvh5Ob6nwylXThnIHLexY/356" alt=""
                       class="doload-img">
                </div>
              </div>
              <div class="course-card_content">
                <div class="course-card_content_header">
                  <span class="tag self-tag">自研</span>
                  <span class="tag">数据库进阶</span>
                  <span>SSM框架之MyBatis</span></div>
                <div class="course-card_info">
                  <div class="course-time">
                    <span class="course-time_time">时间：2022-01-17 20:00:00</span>
                    <span class="course-time_class">3课时</span>
                  </div>
                </div>
                <div class="course-card_teacher">
                  导师：
                  <span class="teacher">
                    杨涛
                  </span>
                </div>
                <div class="buy-info">
                  <div class="buy-info_left">
                    <span class="buy-count">
                      已有421人购买
                    </span>
                  </div>
                  <div class="buy-info_right">
                    <span class="price">
                      免费
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div style="clear: both;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getCarousel, getGategoryList,getShopCourseData } from '@/api/userApi'

  export default {
    name: 'Class',
    data () {
      return {
        arrow: 'never',
        carouselList: [],
        categoryList: [],
        shopCourseDataList: []
      }
    },
    methods: {
      mouseOver (no) {
        // console.log(document.getElementById(no))
        document.getElementById(no).classList.add('show')
      },
      mouseLeave (no) {
        document.getElementById(no).classList.remove('show')
      },
      showArrow () {
        this.arrow = 'always'
      },
      hiddenArrow () {
        this.arrow = 'never'
      },
      seeDetail (classId) {
        this.$router.push({
          path: '/detail/class',
          query: { 'classId': classId }
        })
      },
      async initCarouseList () {
        const { data: res } = await getCarousel()
        this.carouselList = res
      },
      async initGategoryList () {
        const { data: res } = await getGategoryList()
        this.categoryList = res
        console.log(res)
      },
      async initShopCourseData(){
        const {data: res} = await getShopCourseData()
        if (res.code === 200){
          this.shopCourseDataList = res.data
        }
      }
    },
    created () {
      this.initCarouseList()
      this.initGategoryList()
      this.initShopCourseData()
    }
  }
</script>

<style scoped>

  .buy-info_right .price {
    display: inline-block;
    height: 30px;
    font-size: 22px;
    line-height: 30px;
    color: #ff1d00;
  }

  .categoty-menu-item-name:hover {
    color: #ff3f29;
  }

  .categoty-menu-item-sub-name:hover{
    color: #ff3f29;
  }

  .buy-info_right {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .buy-info_left > span {
    display: block;
    height: 17px;
    line-height: 17px;
  }

  .buy-info_left .buy-count {
    color: #818a92;
    font-weight: 300;
  }

  .buy-info_left {
    overflow: hidden;
    font-size: 12px;
    position: absolute;
    bottom: 0;
  }

  .buy-info {
    margin-top: 14px;
    height: 35px;
    position: relative;
  }

  .course-card_teacher {
    padding-bottom: 14px;
    border-bottom: 0.5px solid rgba(153, 153, 153, 0.15);
    height: 65px;
    color: #666;
    height: 17px;
    font-size: 12px;
    line-height: 17px;
  }

  .course-card_teacher {
    padding-bottom: 14px;
    border-bottom: 0.5px solid rgba(153, 153, 153, 0.15);
    height: 65px;
    color: #666;
    height: 17px;
    font-size: 12px;
    line-height: 17px;
  }

  .course-time_class {
    display: inline-block;
    padding-left: 9px;
    position: relative;
    vertical-align: top;
  }

  .course-time_class::before {
    content: " ";
    width: 1px;
    height: 10px;
    background: #c6c6c6;
    position: absolute;
    left: 0;
    top: 3px;
  }

  .course-time_time {
    display: inline-block;
    margin-right: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
  }

  .course-card_info {
    height: 17px;
    font-size: 12px;
    line-height: 17px;
    color: #666;
    margin-bottom: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .course-card_content_header .tag {
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    display: inline-block;
    padding: 0 4px;
    margin-right: 6px;
    color: #fff;
    border-radius: 3px;
    background: rgba(112, 120, 137, 0.6);
  }

  .course-card_content_header .tag.self-tag {
    background: rgba(255, 63, 41, 0.8);
  }

  .course-card_content_header {
    height: 48px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
  }

  .course-card_content {
    padding: 12px;
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
  }

  .ykt-image .doload-img {
    width: 100%;
    height: 100%;
  }

  .ykt-image {
    background: #e4e7eb;
    position: relative;
  }

  .course-card_img_jpk {
    width: 100%;
    height: 178px;
    position: absolute;
    left: 0;
    top: -7px;
  }

  .course-card_img {
    height: 164px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .course-list_card {
    float: left;
    margin: 0 12px 24px 0;
  }

  .course-card {
    width: 289px;
    height: 351px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 8px;
    font-family: PingFang SC;
    overflow: hidden;
    cursor: pointer;
  }

  .module-course .course-module .course-list_card {
    margin-bottom: 0;
  }

  .course-list {
    width: 1205px;
  }

  .module-title {
    height: 34px;
    line-height: 34px;
    font-weight: 600;
    font-size: 24px;
    font-family: PingFang SC;
    margin-bottom: 24px;
    margin-top: 32px;
    color: #333;
    position: relative;
  }

  .module-course {
    font-family: PingFang SC;
    width: 1205px;
    margin: 0 auto;
  }


  /deep/ html {
    background-color: rgb(242, 242, 242) !important;
    padding-top: 96px;
  }

  .m-categoty-banner-container {
    margin: 0 auto;
    width: 1205px;
    height: 320px;
    margin-top: 12px;
    display: flex;
  }

  .categoty-menu-container {
    position: relative;
    margin-right: 11px;
    padding: 16px 0;
    width: 303px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    z-index: 9;
    font-family: PingFang SC;
  }

  .categoty-menu-item-list {
    overflow: hidden;
    background: #ffffff;
    transition: all 0.15s ease-in-out;
  }

  .categoty-menu-item-container {
    line-height: 36px;
    background: #ffffff;
    padding: 0 12px;
  }

  .categoty-menu-item-container:hover {
    background: #eeeeee;
  }

  .categoty-menu-item {
    overflow: hidden;
    position: relative;
  }

  .categoty-menu-item-name {
    color: #333333;
    font-weight: 600;
    cursor: pointer;
    float: left;
    display: block;
  }

  .categoty-menu-item-sub {
    color: #777;
    float: left;
    display: block;
  }

  .categoty-menu-item-sub .separator {
    margin: 0px 3px;
  }

  .categoty-menu-item-sub-name {
    cursor: pointer;
  }

  .banner-container {
    width: 890px;
    height: 100%;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
  }

  .el-carousel--horizontal {
    overflow-x: hidden;
  }

  .el-carousel {
    position: relative;
  }

  .el-carousel__container {
    position: relative;
    height: 300px;
  }

  .el-carousel__indicators--horizontal {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .el-carousel__indicators {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 2;
  }

  .el-carousel__indicator--horizontal {
    display: inline-block;
    padding: 12px 4px;
  }

  .el-carousel__indicator {
    background-color: transparent;
    cursor: pointer;
  }

  .el-carousel__button {
    display: block;
    opacity: .48;
    width: 30px;
    height: 2px;
    background-color: #FFF;
    border: none;
    outline: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-transition: .3s;
    transition: .3s;
  }

  .categoty-menu-item::after {
    content: "";
    position: absolute;
    background-image: url();
    right: 0;
    width: 6px;
    height: 8px;
    background-size: 6px 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  .categoty-item-detail-title {
    display: inline-block;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #333;
    height: 22px;
  }

  .categoty-item-detail-title_arrow {
    width: 0;
    height: 0;
    border-left: 5px solid #333;
    border-top: 3.5px solid #fff;
    border-bottom: 3.5px solid #fff;
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-1px);
  }

  .categoty-item-detail-sub-item {
    line-height: 20px;
    margin-bottom: 8px;
    float: left;
  }

  .categoty-item-detail-sub-item-title {
    font-size: 14px;
    margin-right: 24px;
    cursor: pointer;
    color: #777;
  }

  .categoty-item-detail-quality-list {
    position: absolute;
    bottom: 24px;
    left: 24px;
  }

  .categoty-item-detail-quality-list-title {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #333;
    margin-bottom: 16px;
  }

  .categoty-item-detail-quality-list-course {
    display: block;
    float: left;
    margin-right: 12px;
    text-decoration: none;
  }

  .categoty-item-detail-quality-list-course .img {
    display: block;
    width: 147px;
    height: 82px;
    border-radius: 4px;
  }

  .categoty-item-detail-quality-list-course .title {
    height: 34px;
    width: 146px;
    font-family: PingFang SC;
    font-size: 12px;
    line-height: 17px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 8px;
  }

  .categoty-menu-item-detail {
    display: none;
    box-sizing: border-box;
    position: absolute;
    width: 529px;
    min-height: 320px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 4px 6px rgb(0 0 0 / 8%);
    padding: 24px;
    box-sizing: border-box;
    z-index: 999;
  }

  .categoty-menu-item-detail.show {
    display: block;
    left: 303px;
    top: -16px;
  }

  /deep/ .el-carousel__container {
    height: 320px;
  }

  .course-card:hover {
    border-color: #fff;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    transform: translateY(-5px);
  }

  .course-card:hover .course-card_enter {
    color: #f4ad0b;
  }

</style>
